<template>
    <div>
        <nav class="nav"><span class="back" @click="$router - back()"></span></nav>
    <div class="top">
      <span>
        <van-icon name="arrow-left" />
      </span>
      <h3>房屋管理</h3>
    </div>
    <!-- 渲染列表 -->
    <div class="list" v-for="(item,index) in list" :key="index" @click="goDetail(index)">
      <div class="pic">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
      </div>
      <div class="right">
        <h3>{{item.title}}</h3>
        <div class="detail">{{item.desc}}</div>
        <div class="sub"><span>{{item.tags}}</span></div>
        <p><span>{{item.price}}</span>元/月</p>
      </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'HouseRent',

    data() {
        return {
            list:[]
        };
    },

    mounted() {
        this.getRentlist()
    },

    methods: {
       async getRentlist(){
           const res =  await axios({
                url:'http://liufusong.top:8080/home/groups'
            })
            console.log(res);
            this.list = res.data.body
        },
          goDetail(index) {
      console.log(index);
      this.$router.push({
        path: `/detail?id=${index}`,
      });
    },
    },
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    height: 45px;
    background-color: #21b97a;
    color: #fff;

    span {
      line-height: 40px;
      font-size: 16px;
      padding-left: 15px;
    }
    h3 {
      line-height: 9px;
      margin: auto;
      font-weight: 400;
      font-size: 18px;
    }
  }
  .list {
  margin: 0 auto;
  display: flex;
  width: 345px;
  height: 101px;
  border-bottom: 1px solid #e5e5e5;
  padding-top: 18px;
  .pic {
    width: 106px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 239px;
    padding-left: 12px;
    font-size: 12px;
    // line-height: 22px;
    h3 {
      font-size: 15px;
      margin: 0;
      font-weight: 400;
      color: #394043;
      line-height: 19px;
    }
    .detail {
      color: #afb2b3;
      line-height: 23px;
    }
    .sub {
      display: inline-block;
      border: 0px solid #333;
      border-radius: 3px;
      color: #39becd;
      font-size: 12px;
      background-color: #e1f5f8;
    }
    p {
      margin: 0;
      line-height: 28px;
      color: #fa5741;
      span {
        font-size: 16px;
        font-weight: bolder;
        padding-right: 2px;
      }
    }
  }
}
</style>